<template>
	<view class="animated fadeIn faster page-bg">
		<view class="pl-2 d-flex d-flex-middle d-flex-between mb-4">
			<view class="d-flex d-flex-middle">
				<view class="d-flex d-flex-column d-flex-center mr-1">
					<image :src="avatar" class="rounded"
						style="width: 120rpx;height: 120rpx;background-color: #ffffff;"></image>
				</view>
				<view class="d-flex d-flex-column d-flex-item" v-if="loginState">
					<view class="color000 mb-1">
						<view class="font-bold font32 d-flex d-flex-middle d-flex-wrap">{{ nickName }}
						</view>
						<text v-if="unions_name" class="font26 colorFC6127 mx-1 ">{{ unions_name }}</text>
					</view>
					<!--          <text>{{ phone }}</text>-->
				</view>
				<view v-else class="d-flex d-flex-middle" @click="goUrl('/pages/login/login')">
					<text class="font32">登录/注册</text>
				</view>
			</view>
			<view class="color666 font28 d-flex d-flex-middle" style="width: 160rpx"
				@click="goUrl('/subPages/user-info/user-info')">
				<text>个人设置</text>
				<text class="iconfont icon-youjiantou"></text>
			</view>
		</view>

		<view class="pb-2 mx-2">
			<view class="pt-2 px-3 mycheck pb-2">
				<view class="d-flex d-flex-middle mb-2">
					<text class="font-bold font30">常用功能</text>
				</view>
				<view class="d-flex ">
					<view class="d-flex d-flex-wrap d-flex-item d-flex-center" v-for="(item,index) in inCommonUseList"
						:key="index+'1'" @click="goUrl(item.url,item.click)">
						<view class="d-flex  d-flex-column d-flex-center d-flex-middle  py-2"
							v-if="item.click == 'report'">
							<button style="border: none" data-name="shareBtn" open-type="contact"
								class="d-flex d-flex-center d-flex-column d-flex-middle shareBtn">
								<image class="mb-1" :src="item.img"></image>
								<text class="font26">{{ item.text }}</text>
							</button>
						</view>
						<view class="d-flex  d-flex-column d-flex-center d-flex-middle  py-2" v-else>
							<image class="mb-1" :src="item.img"></image>
							<text class="font26">{{ item.text }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="pb-2 mx-2">
			<view class="pt-2 px-3 mycheck pb-2">
				<view class="d-flex d-flex-middle mb-2">
					<text class="font-bold font30">大神服务</text>
				</view>
				<view class="d-flex d-flex-wrap">
					<view class="d-flex  d-flex-column d-flex-center d-flex-middle mineWidth py-2"
						v-for="(item,index) in inCommonUseList1" :key="index+'2'" @click="goUrl(item.url,item.click)">
						<image class="mb-1" :src="item.img"></image>
						<text class="font26">{{ item.text }}</text>
					</view>
				</view>
			</view>
		</view>

		<view class="pb-2 mx-2">
			<view class="pt-2 px-3 mycheck pb-2">
				<view class="d-flex d-flex-middle mb-2">
					<text class="font-bold font30">我的订单</text>
				</view>
				<view class="d-flex d-flex-wrap">
					<view class="d-flex  d-flex-column d-flex-center d-flex-middle mineWidth py-2"
						v-for="(item,index) in inCommonUseList2" :key="index+'3'"
						@click="item.click?item.click: goUrl(item.url)">
						<image class="mb-1" :src="item.img"></image>
						<text class="font26">{{ item.text }}</text>
					</view>
				</view>
			</view>
		</view>

		<view class="pb-2 mx-2">
			<view class="pt-2 px-3 mycheck pb-2">
				<view class="d-flex d-flex-middle mb-2">
					<text class="font-bold font30">设置</text>
				</view>
				<view class="d-flex d-flex-wrap">
					<view class="d-flex  d-flex-column d-flex-center d-flex-middle mineWidth py-2"
						v-for="(item,index) in inCommonUseList3" :key="index+'4'" @click="goUrl(item.url,item.click)">
						<image v-if="item.img!= ''" class="mb-1" :src="item.img"></image>
						<text v-else class="iconfont main-color icon-Gc_57_public-LogOnOutlined font50  mb-1"></text>
						<text class="font26">{{ item.text }}</text>
					</view>
				</view>
			</view>

		</view>

		<!-- 反馈弹窗 -->
		<uni-popup ref="feedbackPopup" type="center" :mask-click="true">
      <view class="complaint-popup-content " v-if="mData.title == '购买设备'">
        <view class="d-flex d-flex-end" @click="closeFeedbackPopup">
          <text class="iconfont icon-cuo font36 color999"></text>
        </view>
        <view class="complaint-image-container">
          <image
              :src="mData.img"
              class="complaint-image"
              mode="widthFix"
              @longpress="saveComplaintImage(mData.img)"
          ></image>
        </view>
        <view class="complaint-tip font24 color999 text-center py-2">
          长按图片保存，添加微信联系客服
        </view>
      </view>
			<view class="feedback-popup" v-else>
				<view class="popup-header">
					<text class="font32 font-bold">{{ mData.title }}</text>
					<text class="iconfont icon-cuo close-btn" @click="closeFeedbackPopup"></text>
				</view>

				<view class="popup-content m-3" v-if="mData.img != 'email'">
					<text class="card-header  d-flex d-flex-item font30">{{ mData.kefu }}</text>
					<view class="p-2 image-container d-flex d-flex-between">
						<text>{{ mData.content }}</text>
						<image :src="mData.img" mode="widthFix" class="feedback-image"></image>
					</view>
				</view>
				<view class="m-3 " v-else>
					<view class="d-flex d-flex-between mb-1">
						<text class="font-bold">{{ mData.email }}</text>
						<text class="copy-btn" @click="copyCode(mData.email)">复制</text>
					</view>
					<view class="colorf00">{{ mData.content }}</view>
				</view>
				<view class="popup-footer">
					<button class="confirm-btn" @click="closeFeedbackPopup">确定</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	const uniIdCo = uniCloud.importObject("uni-id-co")
	import {
		mapState
	} from "vuex"
	import {
		userApi
	} from '@/http/userApi.js';
	import store from '@/store';

	export default {
		data() {
			return {
				inCommonUseList: [{
						img: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/ch/word01.png',
						text: '举报有奖',
						click: 'report'
					},
					{
						img: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/ch/word02.png',
						text: '邀请有奖',
						url: '/subPages/invite/invite'
					},
					{
						img: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/ch/word03.png',
						text: '钱包',
						url: '/subPages/wallet/wallet'
					},
					{
						img: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/ch/word04.png',
						text: '充值',
						url: '/subPages/recharge/recharge'
					},
					// {
					//   img: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/ch/word10.png',
					//   text: '分享记录',
					//   url: '/subPages/inviteList/inviteList'
					// },
				],
				inCommonUseList1: [{
						img: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/ch/word05.png',
						text: '打手中心',
						url: '/subPages/strikeCenter/strikeCenter'
					},
					{
						img: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/ch/word07.png',
						text: '工会入驻',
						url: '/subPages/club/club'
					},
					{
						img: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/ch/kaohe.png',
						text: '我要考核',
						click: 'kaohe'
					},
           {
						img: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/ch/icon-gou.png',
						text: '购买设备',
             click: 'shebei'
					},
				],
				inCommonUseList2: [{
						img: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/ch/word09.png',
						text: '待接单',
						url: '/subPages/orderList/orderList?order_type=1&user_order_status=1'
					}, {
						img: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/ch/word08.png',
						text: '服务中',
						url: '/subPages/orderList/orderList?order_type=1&user_order_status=2'
					},
					{
						img: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/ch/word10.png',
						text: '已完成',
						url: '/subPages/orderList/orderList?order_type=1&user_order_status=4'
					},
					{
						img: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/ch/word11.png',
						text: '退/售后',
						url: '/subPages/orderList/orderList?order_type=1&user_order_status=5'
					},
				],
				inCommonUseList3: [
					// {
					//     img: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/ch/word12.png',
					//     text: '通知设置'
					//   },
					{
						img: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/ch/word13.png',
						text: '首页设置',
						url: '/subPages/homeSetting/homeSetting'
					},
					{
						img: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/ch/email.png',
						text: '合作和建议',
						click: 'feedback'
					},
					// {
					//   img: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/ch/kefu.png',
					//   text: '联系客服',
					//   click: 'contact'
					// },
					{
						img: '',
						text: '登出',
						click: 'logout'
					},
				],
				mData: {
					img: '',
					title: '',
					content: '',
					kefu: '',
					email: ''
				}

			}
		},
		computed: {
			...mapState({
				balance: state => state.balance,
				coupon_count: state => state.coupon_count,
				expiration_time: state => state.expiration_time,
				nickName: state => state.nickName,
				user_id: state => state.id,
				loginState: state => state.loginState,
				subscribe: state => state.subscribe,
				phone: state => state.phone,
				avatar: state => state.avatar,
				car_count: state => state.car_count,
				unions_name: state => state.unions_name,
			}),

		},
		onLoad() {
		},
		methods: {
			copyCode(e) {
				uni.setClipboardData({
					data: e,
					showToast: false,
					success() {
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						});
					}
				})
			},
			goUrl(urlPages, click) {
				switch (click) {
					case 'logout':
						this.logout()
						return
						// 处理反馈和建议点击事件
					case 'feedback':
						this.showFeedback()
						return
						// 处理联系我们点击事件
					case 'contact':
						this.showContact()
						return
						// 举报有奖
					case 'report':
						this.showReport()
						return
						// 举报有奖
					case 'kaohe':
						this.showKaoHe()
						return
          // 购买设备
                case 'shebei':
                  this.showShebei()
                return;
					default:
						break
				}

				if (!this.loginState) {
					uni.showToast({
						title: '未登录，请先登录！',
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/login/login'
						})
					}, 1500)
				} else {
					console.log(urlPages, 'urlPages')
					uni.navigateTo({
						url: urlPages
					})
				}
			},
      async showShebei() {
        try {
          uni.showLoading({
            title: '加载中...'
          })

          const res = await userApi.getFeedback(5)

          this.mData = {
            img: res.setting,
            title: '购买设备',
            content: '设备专员',
            kefu: '客服'
          }

          uni.hideLoading()
          // 打开弹窗
          this.$refs.feedbackPopup.open()

        } catch (error) {
          uni.hideLoading()
          uni.showToast({
            title: '获取购买设备信息失败',
            icon: 'none'
          })
        }
      },
      // 保存图片
      saveComplaintImage(img) {
        uni.downloadFile({
          url: img,
          success: function(res) {
            var temp = res.tempFilePath
            uni.saveImageToPhotosAlbum({
              filePath: temp,
              success(res1) {
                uni.hideLoading()
                uni.showToast({
                  title: '图片保存成功！'
                })
              },
              fail: () => {
                uni.showToast({
                  title: '图片保存失败',
                  icon: 'none'
                });
              },
            })
          },
          fail: () => {
            uni.showToast({
              title: '图片下载失败',
              icon: 'none'
            });
          },
        })
        uni.showToast({
          title: '长按图片保存',
          icon: 'none'
        })
      },
			// 添加显示反馈信息的方法
			async showKaoHe() {
				try {
					uni.showLoading({
						title: '加载中...'
					})

					// 调用 getFeedback 接口
					const res = await userApi.getFeedback(4)
					this.mData = {
						img: res.setting,
						title: '考核指南',
						content: 'CH电竞考核专员',
						kefu: '考核专员'
					}

					uni.hideLoading()
					// 打开弹窗
					this.$refs.feedbackPopup.open()

				} catch (error) {
					uni.hideLoading()
					uni.showToast({
						title: '获取考核信息失败',
						icon: 'none'
					})
				}
			},
			// 关闭反馈弹窗
			closeFeedbackPopup() {
				this.$refs.feedbackPopup.close()
			},
			// 添加显示反馈信息的方法
			async showFeedback() {
				try {
					uni.showLoading({
						title: '加载中...'
					})

					// 调用 getFeedback 接口
					const res = await userApi.getFeedback(2)
					this.mData = {
						// img: res,
						img: 'email',
						title: '邮箱地址',
						email: res.email,
						content: '邮箱内容每日查看，对我们的反馈建议，以及合作，请通过邮箱提交，谢谢谢。',
					}

					uni.hideLoading()
					// 打开弹窗
					this.$refs.feedbackPopup.open()

				} catch (error) {
					uni.hideLoading()
					uni.showToast({
						title: '获取反馈信息失败',
						icon: 'none'
					})
				}
			},

			// 添加显示联系信息的方法
			async showContact() {
				try {
					uni.showLoading({
						title: '加载中...'
					})

					const res = await userApi.getFeedback(1)

					this.mData = {
						img: res,
						title: '联系我们',
						content: 'CH电竞专员',
						kefu: '客服'
					}

					uni.hideLoading()
					// 打开弹窗
					this.$refs.feedbackPopup.open()

				} catch (error) {
					uni.hideLoading()
					uni.showToast({
						title: '获取联系信息失败',
						icon: 'none'
					})
				}
			},
			//
			async showReport() {
				// try {
				//   uni.showLoading({
				//     title: '加载中...'
				//   })
				//
				//   const res = await userApi.getFeedback(3)
				//
				//   this.mData = {
				//     img: res,
				//     title: '举报有奖',
				//     content: 'CH电竞举报有奖专员',
				//     kefu: '客服'
				//   }
				//
				//   uni.hideLoading()
				uni.showToast({
					title: '文字可后台修改',
					icon: 'none'
				})
				//   // 打开弹窗
				//   this.$refs.feedbackPopup.open()
				//
				// } catch (error) {
				//   uni.hideLoading()
				//   uni.showToast({
				//     title: '获取联系信息失败',
				//     icon: 'none'
				//   })
				// }
			},

			async logout() {
				uni.showToast({
					title: '成功退出登录！',
					icon: 'success'
				})
				setTimeout( async () => {
					if (uniCloud.getCurrentUserInfo().tokenExpired > Date.now()) {
						try {
							await uniIdCo.logout()
						} catch (e) {
							console.error(e);
						}
					}
					uni.removeStorageSync('uni_id_token');
					uni.removeStorageSync('uni-id-pages-userInfo')
					uni.setStorageSync('uni_id_token_expired', 0)
					store.commit("logOut")
					uni.reLaunch({
						url: '/pages/login/login'
					})
				}, 1500)
			},
			funTit() {
				uni.showToast({
					title: '该功能暂未开发！',
					icon: 'none'
				})
			},
			appDown() {
				uni.showToast({
					title: '等待APP上架',
					icon: 'none'
				})
			},


		}
	}
</script>

<style scoped>
	.mycheck {
		border-radius: 20rpx;
		background-color: #fff
	}

	.mycheck image {
		width: 50rpx;
		height: 50rpx;
	}

	.mineWidth {
		width: 25%;
	}

	.color598dfc {
		color: #598dfc;
	}

	/* 反馈弹窗样式 */
	.feedback-popup {
		width: 600rpx;
		background: #fff;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.popup-header {
		padding: 30rpx;
		text-align: center;
		position: relative;
		border-bottom: 2rpx solid #f0f0f0;
	}

	.close-btn {
		position: absolute;
		right: 30rpx;
		top: 50%;
		transform: translateY(-50%);
		font-size: 36rpx;
		color: #999;
	}

	.popup-content {
		max-height: 800rpx;
		overflow-y: auto;
		box-shadow: 0 20rpx 50rpx rgba(0, 0, 0, 0.15);
		border: 2rpx solid rgba(89, 141, 252, 0.2);
	}


	.image-container {
		margin-bottom: 20rpx;
		text-align: center;
	}

	.feedback-image {
		width: 200rpx;
		height: 200rpx;
		border-radius: 10rpx;
	}

	.popup-footer {
		padding: 30rpx;
		text-align: center;
		border-top: 2rpx solid #f0f0f0;
	}

	.card-header {
		padding: 30rpx;
		background: linear-gradient(90deg, #a8ffff 0%, #c8daff 100%);
		color: #333;
	}

	.confirm-btn {
		width: 100%;
		height: 80rpx;
		background: #598dfc;
		color: #fff;
		border: none;
		border-radius: 40rpx;
		font-size: 32rpx;
	}

	.colorFC6127 {
		color: #ff7f02;
	}

	.shareBtn {
		background-color: transparent;
		border: none;
		border-radius: 0;
		padding: 0;
		outline: none;
		line-height: normal;
	}

	.shareBtn::after {
		border: none;
	}

	.copy-btn {
		font-size: 12px;
		padding: 0 5px;
		color: #598dfc;
		/* #ifdef H5 */
		cursor: pointer;
		/* #endif */
	}

  .complaint-popup-content {
    background: #fff;
    border-radius: 20rpx;
    padding: 20rpx;
    margin: 20rpx;
    width: 600rpx;
  }

  .complaint-image-container {
    text-align: center;
  }

  .complaint-image {
    width: 100%;
    border-radius: 10rpx;
  }

  .complaint-tip {
    margin-top: 20rpx;
  }
</style>